<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--[if lt IE 9]><!-->
		<script src="http://code.jquery.com/jquery-1.11.3.min.js "></script>
		<!--<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js "></script>
		<!--<![endif]-->
		<script>
			/*选取的元素
												 $("*")：所有元素；
												 $("#lastname")：id="lastname" 的元素；
												 $(".intro")：class="intro" 的所有元素；
												 $(".intro,.demo")：class 为 "intro" 或 "demo" 的所有元素；
												 $("p")：所有 <p> 元素；
												 $("h1,div,p")：所有 <h1>、<div> 和 <p> 元素
												 $("p:first")：第一个 <p> 元素；$("p:last")：最后一个 <p> 元素；
												例子详见jquery1.html*/
			/*1、id="intro" 的元素*/
			/*$(document).ready(function() {
				$("#intro").css("background-color", "yellow");
			});*/

			/*------------------------分割线-----------------*/
			/*$("tr:even"):所有偶数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推;
			 $("tr:odd"):所有奇数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
			 例子详见jquery1.html*/

			/*---------------------------分割线---------------*/
			/*$("p:first-child"):属于其父元素的第一个子元素的所有 <p> 元素；
			 $("p:first-of-type")：属于其父元素的第一个 <p> 元素的所有 <p> 元素；
			 $("p:last-child")：属于其父元素的最后一个子元素的所有 <p> 元素；
			 $("p:last-of-type")：属于其父元素的最后一个 <p> 元素的所有 <p> 元素；
			 例子详见下面，注释为第三段示例*/
			/*$(document).ready(function() {
				$("button").click(function() {
					var btn = $(this).text();
					$("p" + btn).css("background-color", "yellow");
				});
			});*/

			/*---------------------------分割线---------------*/
			/*$("p:nth-child(2)"):属于其父元素的第二个子元素的所有 <p> 元素;
			 $("p:nth-last-child(2)"):属于其父元素的第二个子元素的所有 <p> 元素，从最后一个子元素开始计数;
			 $("p:nth-of-type(2)"):属于其父元素的第二个 <p> 元素的所有 <p> 元素;
			 $("p:nth-last-of-type(2)"):属于其父元素的第二个 <p> 元素的所有 <p> 元素，从最后一个子元素开始计数
			 例子详见下面，注释为第四段示例*/
			/*$(document).ready(function() {
				$("button").click(function() {
					var btn = $(this).text();
					$("p" + btn).css("background-color", "yellow");
				});
			});*/
			/*---------------------------分割线---------------*/
			/*例子详见下面，注释为第五段示例*/
			/*$(document).ready(function() {
				$("button").click(function() {
					var btn = $(this).text();
					$("p" + btn).css("background-color", "yellow");
				});
			});*/
			
		</script>
	</head>

	<body>
		<!--	1、id="intro" 的元素-->
		<!--<h1>欢迎访问我的主页</h1>
		<p>菜鸟教程</p>
		<p id="intro">学的不仅是技术，更是梦想！</p>-->
		<!--//////////////////////////////////////////////////////////////////-->
		<!--第三段示例-->
		<!--<button>:last</button>
		<button>:last-child</button>
		<button>:last-of-type</button><br><br>
		<p>body 中第一个段落。</p>

		<div style="border:1px solid;">
			<p>div 中第一个段落，是 div 的第一个子元素。</p>
			<p>div 中的最后一个段落，是 div 的最后一个子元素。</p>
		</div><br>

		<div style="border:1px solid;">
			<span>这是一个 span 元素，是 div 中的第一个子元素。</span>
			<p>另一个 div 中第一个段落，是 div 中的第二个子元素。</p>
			<p>另一个 div 中的最后一个段落, 是 div 中的第三个子元素。</p>
			<span>这是一个 span 元素，是 div 中的最后一个子元素。</span>
		</div><br>

		<div style="border:1px solid">
			<p>另一个 div 中第一个段落，是 div 中的第一个子元素。</p>
			<p>另一个 div 中的最后一个段落, 是 div 中的最后一个子元素。</p>
		</div>

		<p>body 中最后一个段落。</p>-->

		<!--<button>:first</button>
		<button>:first-child</button>
		<button>:first-of-type</button><br><br>-->
		<!--//////////////////////////////////////////////////////////////////-->
		<!--第四段示例-->
		<!--<button>:nth-child(2)</button>
		<button>:nth-last-child(2)</button>
		<button>:nth-of-type(2)</button>
		<button>:nth-last-of-type(2)</button>

		<h1>body 中的标题</h1>
		<p>body 中第一个段落。</p>
		<p>body 中第二个段落。</p>

		<div style="border:1px solid;">
			<span>div 中的 span 元素</span>
			<p>div 中的第一个段落。</p>
			<p>div 中的第二个段落。</p>
			<p>div 中的第三个段落。</p>
			<p>div 中的第四个段落。</p>
			<span>div 中的 span 元素</span>
		</div><br>

		<div style="border:1px solid;">
			<p>另一个 div 中的第一个段落。</p>
			<p>另一个 div 中的第二个段落。</p>
			<p>另一个 div 中的最后一个段落。</p>
		</div>

		<p>body 中最后一个段落。</p>-->
		<!--//////////////////////////////////////////////////////////////////-->
		<!--第五段示例-->
		<!--<button>:only-child</button>
		<button>:only-of-type</button><br><br>
		<div style="border:1px solid;">
			<p>第一个段落</p>
			<p>最后一个段落</p>
		</div><br>

		<div style="border:1px solid;">
			<p>只有一个段落</p>
		</div><br>

		<div style="border:1px solid;">
			<span>这是 span 元素</span>
			<p>唯一的段落</p>
		</div><br>-->
		
	</body>

</html>